<!-- 

  v-model + input-checkbox
-->

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="app">

    <!-- 1. checkBox 单选框 -->
    <!-- <label for="agree">
      <input type="checkbox" id="agree" v-model='isAgree'>同意协议
    </label>

    <br> <br>
    <h2>你选择的是： {{isAgree}}</h2>
    <br>

    <button :disabled="!isAgree">下一步</button> -->

    <!-- 2. checkBox 多选框 -->
    <label for="hobby">
      <input type="checkbox" id="hobby" value="篮球" v-model='hobbies'>篮球
      <input type="checkbox" id="hobby" value="足球" v-model='hobbies'>足球
      <input type="checkbox" id="hobby" value="乒乓球" v-model='hobbies'>乒乓球
      <input type="checkbox" id="hobby" value="羽毛球" v-model='hobbies'>羽毛球
    </label>
    <h2>您选择了: {{hobbies}}</h2>
  </div>

  <script src="../../js/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        isAgree: false, //单选
        hobbies: []     //多选
      }
    })
  </script>
</body>
</html>